<template>
	<view class="car">

		<view class="container">
			<image src="/static/img/1/27.png" mode="aspectFill" class="i-header"></image>
			<view class="address" @click="add">
				<view class="left">
					<view class="name">
						<text>王 璟</text>
						<text>18288668122</text>
					</view>
					<view class="addr">云南省昆明市官渡区小板桥街道108</view>
				</view>
				<image src="/static/img/1/93.png" mode="aspectFill"></image>
			</view>
			<view class="car-list">
				<view class="list-item">
					<view class="right">
						<view class="goods-img">
							<image src="/static/img/1/39.png" mode="aspectFill"></image>
						</view>
						<view class="info">
							<text class="name">智利加力果 12个装，进口新鲜...</text>
							<text class="price">￥39.9</text>
							<view class="option">
								<text class="stock">库存紧张</text>
								<uni-number-box class="step" :min="1" :max="20" :value="20" :index="1" @eventChange="numberChange"></uni-number-box>
							</view>
						</view>
					</view>
				</view>
				<view class="list-item">

					<view class="right">
						<view class="goods-img">
							<image src="/static/img/1/39.png" mode="aspectFill"></image>
						</view>
						<view class="info">
							<text class="name">智利加力果 12个装，进口新鲜...</text>
							<text class="price">￥39.9</text>
							<view class="option">
								<text class="stock">库存紧张</text>
								<uni-number-box class="step" :min="1" :max="20" :value="20" :index="1" @eventChange="numberChange"></uni-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="car-list">
				<view class="tio">
					加价购商品
					<view class="righs" @click="tts">
						重选
					</view>
				</view>
				<view class="list-item">

					<view class="right">
						<view class="goods-img">
							<image src="/static/img/1/39.png" mode="aspectFill"></image>
						</view>
						<view class="info">
							<text class="name">智利加力果 12个装，进口新鲜...</text>
							<text class="price">￥39.9</text>
							<view class="option">
								<text class="stock">库存紧张</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="c-row b-b" @click="invoice">
				<text class="tit">发票</text>

				<text class="yticon icon-you"></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">线下提货</text>

				<text class="yticon icon-you"></text>
			</view>
			<view class="order-info">
				<view class="title">
					<text class="num">订单：20190909</text>
					<text class="time">下单时间：2019.9.30 15:30</text>
				</view>
				<view class="detail">
					<view class="item">
						<text class="name">支付方式</text>
						<text class="desc">未选择</text>
					</view>
					<view class="item">
						<text class="name">支付方式</text>
						<text class="desc">未选择</text>
					</view>
				</view>
				<view class="total">
					<text class="all">应付合计</text>
					<text class="price">￥500.80</text>
				</view>
			</view>
			<view class="service">
				<view class="title">
					<text>服务时间</text>
					<text class="time">8:30 -24:00</text>
				</view>
				<view class="contact">
					<view class="item">
						<image src="/static/img/1/51.png" mode="aspectFill"></image>
						<text>在线客服</text>
					</view>
					<view class="item">
						<image src="/static/img/1/23.png" mode="aspectFill"></image>
						<text>电话客服</text>
					</view>
				</view>
			</view>

			<view class="footer-btn">
				<view class="left">
					<view class="checkall">
						应付&nbsp; ￥500
					</view>
					<!-- <view class="freight">不含运费</view> -->
				</view>
				<view class="right">
					<view class="total">取消订单</view>
					<view class="settlement" @click="topay">结算（1）</view>
				</view>
			</view>
		</view>
		<!-- 分享 -->
		<share ref="share" :contentHeight="900" :shareList="shareList"></share>
		<view class="meng" v-if="meng">
			<view class="tan">
				<view class="h4">
					<view class="close" @click="tts">
						<image src="/static/img/3/3-96.png" mode="widthFix"></image>
					</view>
				</view>
				<scroll-view scroll-y="true" class="carbox">
					<view class="car-list">
						<view class="list-item">
							<view class="right">
								<view class="goods-img">
									<image src="/static/img/1/39.png" mode="aspectFill"></image>
								</view>
								<view class="info">
									<text class="name">智利加力果 12个装，进口新鲜...</text>
									<text class="price">￥39.9</text>
									<view class="option">
										<text class="stock">库存紧张</text>
										<uni-number-box class="step" :min="1" :max="20" :value="20" :index="1" @eventChange="numberChange"></uni-number-box>
									</view>
								</view>
							</view>
						</view>
						<view class="list-item">

							<view class="right">
								<view class="goods-img">
									<image src="/static/img/1/39.png" mode="aspectFill"></image>
								</view>
								<view class="info">
									<text class="name">智利加力果 12个装，进口新鲜...</text>
									<text class="price">￥39.9</text>
									<view class="option">
										<text class="stock">库存紧张</text>
										<uni-number-box class="step" :min="1" :max="20" :value="20" :index="1" @eventChange="numberChange"></uni-number-box>
									</view>
								</view>
							</view>
						</view>
						<view class="list-item">

							<view class="right">
								<view class="goods-img">
									<image src="/static/img/1/39.png" mode="aspectFill"></image>
								</view>
								<view class="info">
									<text class="name">智利加力果 12个装，进口新鲜...</text>
									<text class="price">￥39.9</text>
									<view class="option">
										<text class="stock">库存紧张</text>
										<uni-number-box class="step" :min="1" :max="20" :value="20" :index="1" @eventChange="numberChange"></uni-number-box>
									</view>
								</view>
							</view>
						</view>

					</view>

				</scroll-view>
				<view class="ok">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box.vue'
	import share from '@/components/share';

	export default {
		components: {
			uniNumberBox,
			share
		},
		data() {
			return {
				empty: false, //空白页现实  true|false
				shareList: [],
				meng:false
			}
		},
		async onLoad() {


			this.shareList = await this.$api.json('shareList');
		},
		methods: {
			tts(){
				if(this.meng){
					this.meng=false
				}else{
				this.meng=true	
				}
				
			},
			numberChange() {

			},
			add() {
				uni.navigateTo({
					url: `/pages/address/index`
				})
			},
			invoice() {
				uni.navigateTo({
					url: `/pages/invoice/add`
				})
			},
			topay() {
				uni.navigateTo({
					url: `/pages/order/payway`
				})
			}
		},
		onNavigationBarButtonTap(e) {
			// console.log(e)

			this.$refs.share.toggleMask();


		}


	}
</script>

<style lang="scss">
	.ok {
		width: 100%;
		height: 65rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 33rpx;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 65rpx;
		text-align: center;
		margin-top: 60rpx;
	}

	.meng {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		top: 0;
		left: 0;
		z-index: 100;
	}

	.tan {
		width: 100%;
		height: 994rpx;
		background: rgba(255, 255, 255, 1);
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 25rpx;
	}

	.carbox {
		height: calc(488rpx + 150rpx);
		overflow: auto;
	}

	.tan .h4 {
		text-align: right;
	}

	.tan .h4 .close {
		display: inline-block;
		width: 32rpx;
	}

	.tan .h4 .close image {
		display: block;
		width: 100%;
	}

	.car-list {
		width: 100%;
		// height:461px;
		background: rgba(255, 255, 255, 1);
		border-radius: 16upx;
		padding: 0 26upx;
		margin-bottom: 21upx;

		.list-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.left {
				width: 34upx;
				margin-right: 24upx;

				image {
					width: 34upx;
					height: 34upx;
				}
			}

			.right {
				flex: 1;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 32upx 0;
				border-bottom: 2upx solid #EBEBEB;

				.goods-img {
					width: 156upx;
					height: 156upx;
					background: rgba(255, 255, 255, 1);
					border: 1upx solid rgba(217, 217, 217, 1);
					opacity: 0.97;
					border-radius: 2upx;
					margin-right: 31upx;

					image {
						width: 156upx;
						height: 156upx;
					}
				}

				.info {
					flex: 1;
					height: 156upx;

					.name {
						display: flex;
						font-size: 23upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
						line-height: 50upx;
					}

					.price {
						display: flex;
						font-size: 33upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(240, 64, 111, 1);
					}

					.option {
						display: flex;
						font-size: 23upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(93, 93, 93, 1);
						justify-content: space-between;
						margin-top: 30upx;
					}
				}

			}

			&:last-child .right {
				border: none;
			}
		}

	}

	.car-list .tio {
		padding-top: 25rpx;
		padding-bottom: 25rpx;
		font-size: 32rpx;
		color: rgba(240, 64, 111, 1);
	}

	.car-list .tio .righs {
		float: right;
		font-size: 22rpx;
		color: #5D5D5D;
	}

	page {
		background: #f5f5f5;
	}

	.car {

		.container {
			padding-bottom: 134upx;

			.c-row {
				display: flex;
				align-items: center;
				padding: 35upx 25upx;
				position: relative;
				background: #fff;
				margin-bottom: 10upx;

				.tit {
					width: 140upx;
					font-size: 27upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);

				}

				.icon-you {
					flex: 1;
					text-align: right;
				}

			}

			.i-header {
				width: 100%;
				height: 10upx;
				display: block;
			}

			.address {
				padding: 28upx 23upx;
				height: 143upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0upx 0upx 16upx 0upx rgba(0, 0, 0, 0.08);
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10upx;

				.left {
					display: flex;
					height: 100%;
					align-items: center;
					justify-content: flex-start;
					flex-wrap: wrap;

					.name {
						display: inline-flex;
						width: 70%;
						justify-content: space-between;
						font-size: 27upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}

					.addr {
						font-size: 27upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						width: 100%;
					}
				}


				image {
					// flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					width: 46upx;
					height: 45upx;

				}

			}


			.order-info {
				padding: 6upx 25upx;
				background: #fff;
				margin-bottom: 10upx;

				.title {
					padding: 19upx 0;
					border-bottom: 2upx solid rgba(68, 68, 68, 0.2);

					text {
						display: block;
						font-size: 23upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
						line-height: 40upx;
					}

				}

				.detail {
					padding: 26upx 0;
					border-bottom: 2upx solid rgba(68, 68, 68, 0.2);

					.item {
						display: block;
						font-size: 23upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
						line-height: 40upx;

						.name {
							display: inline-block;
							width: 92upx;
							margin-right: 77upx;
						}
					}
				}

				.total {
					padding: 33upx 0;
					font-size: 23upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(240, 64, 111, 1);

					.all {
						display: inline-block;
						width: 92upx;
						margin-right: 55upx;
					}
				}
			}

			.service {
				padding: 35upx 25upx;
				background: #fff;

				.title {
					font-size: 27upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);

					.time {
						font-size: 19upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
						margin-left: 16upx;
					}
				}

				.contact {
					padding: 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 31upx;

					.item {
						width: 315upx;
						height: 74upx;
						background: rgba(255, 255, 255, 1);
						border: 1upx solid rgba(223, 223, 223, 1);
						border-radius: 5upx;
						font-size: 23upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 34upx;
							height: 36upx;
							margin-right: 15upx;
						}
					}
				}

			}
		}

		.footer-btn {
			position: fixed;
			/* left: 30upx; */
			bottom: 0;
			z-index: 95;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 125upx;
			background: #1B1B1B;
			padding: 0 30upx;

			.left {
				width: 43%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.checkall {
					font-size: 31upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
				}

				.freight {
					font-size: 22upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(136, 136, 136, 1);
				}

			}

			.right {
				width: 57%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.total {
					font-size: 33upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					white-space: nowrap;

					.price {
						font-size: 33upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(240, 64, 111, 1);
					}
				}

				.settlement {
					padding: 14upx 30upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 31upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					background: rgba(240, 64, 111, 1);
					border-radius: 29upx;
					color: rgba(255, 255, 255, 1);
					white-space: nowrap;

				}
			}

		}
	}
</style>
